<template>
  <view class="lawAdvice-container">
    <view class="banner">
      <view
        class="banner-container"
        :style="{
          background: 'url(' + homebg + ') no-repeat',
          backgroundSize: '100% 100%',
        }"
      >
        <view class="container">
          <view class="left">
            <u-avatar :src="lawyerDetail.pic" size="75"></u-avatar>
          </view>
          <view class="right">
            <view class="flex-row">
              <text class="text-red">{{
                lawyerDetail.name || "默认名字"
              }}</text>
              <text class="text-gray">{{ lawyerDetail.post || "" }}</text>
            </view>
            <view class="item">
              <image
                src="/static/images/lawDetail/position.png"
                mode="scaleToFill"
              />
              <text>{{ address || "无事务所" }}</text>
            </view>
            <view class="item">
              <image
                src="/static/images/lawDetail/lawer.png"
                mode="scaleToFill"
              />
              <text>{{ lawyerDetail.company }}</text>
            </view>
            <view class="item">
              <image src="/static/images/lawDetail/id.png" mode="scaleToFill" />
              <text>{{ lawId }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="images-content">
      <uni-section class="mb-10" title="擅长领域" type="line"></uni-section>
      <view class="grid-container">
        <u-grid :border="false" @click="click">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in lawyerDetail.goods"
            :key="baseListIndex"
          >
            <u-tag :text="baseListItem" shape="circle" type="error"></u-tag>
          </u-grid-item>
        </u-grid>
      </view>
      <uni-section class="mb-10" title="律师介绍" type="line"></uni-section>
      <view class="introduce-container">
        <text >
          {{ lawyerDetail.info || "暂无介绍" }}
        </text>
      </view>
      <uni-section class="mb-10" title="服务项目" type="line"></uni-section>
      <view class="grid-container">
        <u-grid :border="false" @click="click" v-if="serviceShow">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in lawyerDetail.serviceList"
            :key="baseListIndex"
            @click="toDetail(baseListItem)"
          >
            <view class="img">
              <image
                :src="baseListItem.icon"
                style="width: 100%; height: 100%"
              ></image>
            </view>

            <text class="grid-text">{{ baseListItem.title }}</text>
          </u-grid-item>
        </u-grid>
        <view v-else class="no-service" >
          <text>暂无服务项目</text>
        </view>

      </view>
    </view>
  </view>
</template>
  <script>
import bgBase64 from "@/static/const/bgBase64.js";
import {isEmptyArray, isEmptyObject, isEmptyString} from "@/utils/common.js";
export default {
  data() {
    return {
      homebg: bgBase64.lawyerDetailBg,
      id: "",
      lawyerDetail: {},
      address: "",
      lawId: "",
      serviceShow: true,
    };
  },
  onLoad: function (options) {
    this.id = options.id;
    this.getLawyerDetail();
  },
  methods: {
    getLawyerDetail() {
      this.$store.dispatch("LawyerDetail", this.id).then((res) => {
        this.lawyerDetail = res.data;
        this.lawyerDetail.goods = [];
        this.address =isEmptyObject(this.lawyerDetail.lawLawyer) ? "中国" : this.lawyerDetail.lawLawyer.address;
        this.lawId =isEmptyObject(this.lawyerDetail.lawLawyer)? "无" : this.lawyerDetail.lawLawyer.num;
        if (!isEmptyString(this.lawyerDetail.good1)) {
          this.lawyerDetail.goods.push(this.lawyerDetail.good1);
        }
        if (!isEmptyString(this.lawyerDetail.good2)) {
          this.lawyerDetail.goods.push(this.lawyerDetail.good2);
        }
        if (!isEmptyString(this.lawyerDetail.good3)) {
          this.lawyerDetail.goods.push(this.lawyerDetail.good3);
        }
        if(isEmptyArray(this.lawyerDetail.serviceList)){
          this.serviceShow = false;
        }
      });
    },
    click(e) {
    },
    toDetail(item) {
      if(item.type=='1'){
        uni.navigateTo({
          url: "/pages/telephone-consultation/index?teamId=" + this.id+"&id="+item.id,
        });
      }else{
        uni.navigateTo({
          url: "/pages/law-service-detail/index?teamId=" + this.id+"&id="+item.id,
        });
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.lawAdvice-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  .banner {
    width: 100%;
    height: 250rpx;
    background: linear-gradient(to right, #2193b0, #6dd5ed);
    .banner-container {
      width: 100%;
      height: 100%;
      position: relative;
      .container {
        width: 90%;
        border-radius: 10px;
        border: 1px solid #fff;
        background-color: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
        position: absolute;
        top: 50%;
        left: 5%;
        display: flex;
        flex-direction: row;
        padding: 0.5rem;
        align-items: center;
        .left {
          margin-left: 10rpx;
        }
        .right {
          width: 60%;
          margin-left: 1rem;
          display: flex;
          flex-direction: column;
          .flex-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
          }
          .text-red {
            font-weight: bolder;
            font-size: 1rem;
          }
          .text-gray {
            // margin-left: 50rpx;
          }
          .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 20rpx;
            image {
              width: 30rpx;
              height: 30rpx;
            }
            text {
              font-size: 30rpx;
              margin-left: 10rpx;
            }
          }
        }
      }
    }
  }
  .images-content {
    width: 100%;
    padding-left: 40rpx;
    padding-right: 40rpx;
    margin-top: 180rpx;
    padding-bottom: 200rpx;
    display: flex;
    flex-direction: column;
    /deep/ .uni-section {
      background-color: rgba(0, 0, 0, 0);
    }
    .grid-container {
      background-color: #fff;
      border-radius: 10px;
      padding-bottom: 20rpx;
      /deep/ .u-grid-item {
        margin-top: 30rpx;
      }
      .img {
        width: 1.5rem;
        height: 1.5rem;
      }
    }
    .introduce-container {
      background-color: #fff;
      border-radius: 10px;
      padding: 40rpx;
      margin-top: 20rpx;
      text {
        font-size: 30rpx;
      }
    }
    .no-service{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 1rem;
    }
  }
  .mb-10 {
  }
}
</style>